<template>
  <div class="chart-content w-p-100 h-p-100" :id="idName"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const porp = defineProps({
  idName: {
    Type: String,
    default: () => "chart" + Math.floor(Math.random() * 100000000),
  },
  configData: {
    Type: Object,
    default: () => {
      return {
        xAxisData: [],
        series: [],
      };
    },
  }
});

onMounted(() => {
  const myChart = echarts.init(document.getElementById(porp.idName));
  let series = [];
  porp.configData.series.forEach((val) => {
    series.push({
      name: val.name,
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: `rgba(${val.color}, 0.4)`,
              },
              {
                offset: 0.8,
                color: `rgba(${val.color}, 0.1)`,
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
          shadowBlur: 10,
        },
      },
      itemStyle: {
        normal: {
          color: `rgb(${val.color})`,
          borderColor: `rgba(${val.color}, 0.27)`,
          borderWidth: 12,
        },
      },
      data: val.data,
    });
  });
  const option = {
    backgroundColor: "transparent",

    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },

    grid: {
      top:'5%',
      left: "0%",
      right: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#d2d4da",
            fontSize: 12,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#04BBFF",
          },
        },
        data: porp.configData.xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: porp.configData.yAxisName,
        nameTextStyle: {
          color: "#d2d4da",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#57617B",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#d2d4da",
            fontSize: 9,
          },
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: ["rgba(4,187,255,0.2)"],
          },
        },
      },
    ],
    series: series,
  };
  // 绘制图表
  myChart.setOption(option);
});
</script>

<style scoped>
</style>